import React, { useEffect, useRef } from "react";
import * as echarts from "echarts";
const LeftTop: React.FC = () => {
  const chartRef = useRef<HTMLDivElement | null>(null);
  useEffect(() => {
    if (chartRef.current) {
      const chartInstance = echarts.init(chartRef.current);
      const option = {
        xAxis: {
          type: "category",
          data: ["图书馆", "体育馆", "实验楼", "超市", "会议楼"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
          },
        ],
      };
      chartInstance.setOption(option);
      window.addEventListener("resize", () => {
        chartInstance.resize();
      });
      return () => {
        window.removeEventListener("resize", () => {
          chartInstance.resize();
        });
        chartInstance.dispose();
      };
    }
  }, []);
  return <div ref={chartRef} style={{ widows: "100%", height: "100%" }}></div>;
};
export default LeftTop;
